<template>
	<view class="wrapper">
		<view class="inner">
			<view class="list">
				<view class="item" v-for="(item,index) in useDataResult.dataList" :key="index">
					<view class="row title">
						<view class="col">{{ item.couponName }}</view>
						<view class="col">{{ numberUtil.computeNumber(item.couponPrice ?? 0,'/',100).result }}</view>
					</view>
					<view class="row">
						<view class="col">
							<text class="c_999">卡券数量：</text>{{ item.couponNum }}张
						</view>
						<view class="col c_999">券面额</view>
					</view>
					<view class="row">
						<view class="col">
							<text class="c_999">领取数量：</text>{{ item.couponGet }}张
						</view>
						<view class="col c_999">满{{ numberUtil.computeNumber(item.payAmount ?? 0,'/',100).result }}元可用</view>
					</view>
					<view class="row">
						<view class="col">
							<text class="c_999">剩余数量：</text>{{ item.remainNum }}张
						</view>
					</view>
					<view class="row">
						<view class="col">
							<text class="c_999">商户名称：</text>{{ item.mchName }}
						</view>
					</view>
					<view class="row">
						<view class="col"><text class="c_999">活动时间：</text><text style="letter-spacing: -1rpx;">{{ dayjs(item.startTime).format('YYYY[年]M[月]D[日]') }}-{{ dayjs(item.endTime).format('YYYY[年]M[月]D[日]') }}</text></view>
						<view v-if="state === '4'" class="col btn" @click="onRemoveFunc(item.activityId)">下架</view>
					</view>
					<!-- 状态图标（只有待审核、已结束和驳回的才有该图标） -->
					<image v-if="state === '6'" class="state-img end" src="https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/bc11b2e6-8cc1-4ab0-99ac-d178ee93fb2d.png"></image>
				</view>
			</view>
			<gzListNull :list="useDataResult.dataList"></gzListNull>
		</view>
	</view>
</template>

<script setup>
	import { onLoad, onShow } from '@dcloudio/uni-app'
	import { ref, computed, getCurrentInstance } from 'vue'
	import numberUtil from '@/util/numberUtil.js'
	import dayjs from 'dayjs'
	import { $mchActivityRemoveCoupon } from '@/http/apiManager.js'
	import { $mchActivityAgentFindActivity } from '@/http/marketing/apiMarketing.js'
	import useGetList from '@/hooks/useGetList.js'
	
	const { $infoBox } = getCurrentInstance().appContext.config.globalProperties
	
	const { useDataResult, getList } = useGetList($mchActivityAgentFindActivity, data => data, {}, false)
	
	// 卡券状态
	const state = ref('')
	
	// 发放的卡券4和已下架的卡券5和已结束的卡券6才有领取数量、剩余数量
	// state:string 4正在发放的卡券 5已下架的卡券 1待审核的卡券 6已结束的卡券 3驳回的卡券
	onLoad(({ state:couponState }) => {
		state.value = couponState
		// 卡券标题处理
		onPageTitleHandle(couponState)
	})
	onShow(() => {
		// 请求卡券列表
		getCouponList(state.value)
	})
	// 根据卡券状态处理标题
	function onPageTitleHandle(state){
		let title = '';
		switch (state) {
			case '4':
				title = '当前活动';
				break;
			case '6':
				title = '已结束活动';
				break;
			default:
				title = '未知卡券'
				break;
		}
		// 设置卡券标题
		uni.setNavigationBarTitle({
			title
		})
	}
	// 请求卡券列表
	async function getCouponList(state){
		uni.showLoading({
			title: '加载中...',
			mask: true
		})
		const res = await getList({ state })
		console.log(res);
		uni.hideLoading()
	}
	// 下架卡券
	function onRemoveFunc(activityId){
		uni.showModal({
			title: '提示',
			content: '下架后活动将结束，请确认是否下架？',
			async success({ cancel }) {
				if(cancel) return;
				uni.showLoading({
					title: '下架中...',
					mask: true
				})
				await $mchActivityRemoveCoupon({ activityId })
				// 刷新卡券列表
				await getCouponList(state.value)
				$infoBox.toast('下架成功！')
			}
		})
	}
</script>

<style lang="less" scoped>
	.state-img{
		width: 100rpx;
		height: 100rpx;
		position: absolute;
		&.reject{	// 拒绝
			top: 32rpx;
			right: 24rpx;
		}
		&.audit{	// 审核
			right: 24rpx;
			top: 50%;
			transform: translateY(-50%);
		}
		&.end{	// 结束
			bottom: 32rpx;
			right: 24rpx;
		}
	}
	.c_999{
		color: #999999;
	}
	.btn{
		width: 136rpx;
		background-color: #24C789;
		color: #ffffff;
		padding: 10rpx 0;
		text-align: center;
		border-radius: 8rpx;
		flex-shrink: 0;
	}
	.wrapper{
		background-color: #F5F6FA;
		width: 100%;
		min-height: 100vh;
		position: relative;
		box-sizing: border-box;
		.inner{
			padding: 0 32rpx;
			.list{
				overflow: hidden;
				.item{
					margin-top: 24rpx;
					background-color: #ffffff;
					padding: 32rpx 24rpx;
					border-radius: 18rpx;
					display: flex;
					flex-wrap: wrap;
					gap: 16rpx;
					font-size: 28rpx;
					position: relative;
					
					.row{
						width: 100%;
						display: flex;
						justify-content: space-between;
						align-items: center;
						gap: 10rpx;
						
						&.title{
							font-weight: bold;
							.col{
								&:nth-child(1){
									font-size: 36rpx;
								}
								&:nth-child(2){
									font-size: 42rpx;
									color: #ff8831;
									&:before{
										content: '￥';
										font-size: 32rpx;
									}
								}
							}
						}
					}
				}
			}
		}
	}
</style>